<!-- 兑换明细 -->
<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :maskClosable="false"
    :title="title"
    width="50%"
  >
    <page-header-wrapper>
      <a-card class="table-card">
        <GzSearchForm :searchFunc="searchFunc" :resetFunc="() => { searchData = {} }" searchConditionNum="6">
          <!-- <a-form-item label="" class="table-search-item">
            <a-input v-model:value="searchData['realName']" placeholder="兑换人姓名" />
          </a-form-item> -->
          <a-form-item label="" class="table-search-item">
            <a-input v-model:value="searchData['phone']" placeholder="兑换人手机号" />
          </a-form-item>
        </GzSearchForm>
        <!-- 列表渲染 -->
        <GzTable
          ref="infoTableRef"
          :table-columns="tableColumns"
          :init-data="false"
          :req-table-data-func="reqTableDataFunc"
          :search-data="searchData"
          :scrollX="600"
        >
          <template #topBtnSlot>
            <a-button :disabled="vdata.total == 0" type="primary" @click="exportExcel"><export-outlined />导出</a-button>
          </template>
        </GzTable>
      </a-card>
    </page-header-wrapper>
  </a-drawer>
</template>

<script setup lang="ts">
import { $getScoreRecord, $exportExcel,} from '@/api/score/scoreMall/index'
import { reactive, ref, defineExpose, watch, computed, getCurrentInstance, nextTick } from 'vue'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
import fileDownload from 'js-file-download'

const infoTableRef = ref()
const searchData = ref({})

// 奖品表头
const tableColumns = reactive([
  // { key: "awardId", title: "商品编号", dataIndex: "awardId", width: 100 },
  { key: 'name', title: '商品名称', dataIndex: 'name', },
  // { key: 'goodsType', title: '商品类型', dataIndex: 'goodsType', width: 140, minWidth: 140, maxWidth: 170 },
  // { key: 'fansName', title: '兑换人姓名', dataIndex: 'fansName', width: 140, minWidth: 140, maxWidth: 170 },
  // { key: 'realName', title: '兑换人姓名', dataIndex: 'realName', },
  // { key: "nickName", title: "兑换人昵称", dataIndex: "nickName", },
  { key: 'phone', title: '兑换人手机号', dataIndex: 'phone', },
])

const vdata: any = reactive({
  total: 0, // 总条数
  awardType: undefined, // 奖品类型
  scoreExchangeId: undefined, // 兑换记录id
  visible: false,
  saveObject: {},
})

const title = computed(() => {
  if (vdata.awardType == 1) {
    return '虚拟券兑换明细'
  } else if (vdata.awardType == 2) {
    return '实物奖品兑换明细'
  } else {
    return '卡券奖品兑换明细'
  }
})

// 请求table接口数据
function reqTableDataFunc(params: any) {
  return new Promise((resolve, reject) => {
    $getScoreRecord({ awardType: vdata.awardType, scoreExchangeId: vdata.scoreExchangeId, ...params }).then(res => {
      vdata.total = res.total
      resolve(res)
    })
  })
}
/**
 * 导出excel
 */
function exportExcel() {
  $exportExcel('/api/scoreExchange/deriveConsumeExcel',{ awardType: vdata.awardType, scoreExchangeId: vdata.scoreExchangeId }).then(res => {
    fileDownload(res.data,'兑换记录.xlsx')
  })
}

function show(awardType, scoreExchangeId) {
  vdata.awardType = awardType  // 奖品类型
  vdata.scoreExchangeId = scoreExchangeId  // 兑换记录id
  vdata.visible = true
  nextTick(() => {
    searchFunc()
  })
}

function searchFunc() {
  infoTableRef.value.refTable(true)
}

defineExpose({
  show,
})
</script>

<style lang="less" scoped>
/deep/ .table-layer .table-search-item{
  width: calc(100% / 4);
}
</style>
